<template>
  <div class="custom-header">
      <div class="logo-container">
          <school-logo></school-logo>
      </div>
      <el-menu :default-active="activeIndex" class="nav-menu" mode="horizontal" @select="handleSelect" :router="true">
          <el-menu-item index="1" route="/">首页</el-menu-item>
          <el-menu-item index="2" route="/alumniMap">校友地图</el-menu-item>
          <el-menu-item index="3" :disabled="!isLogin" route="/userChat">校友聊天</el-menu-item>
          <el-submenu index="4">
              <template slot="title"><i class="el-icon-user"></i>个人中心</template>
              <!-- 已登录状态显示 -->
              <template v-if="isLogin">
                  <el-menu-item index="2-1" route="/userInfo" @click="infoDetail">个人信息</el-menu-item>
                  <el-menu-item index="2-3" @click="handleLogout">注销</el-menu-item>
              </template>
              <!-- 未登录状态显示 -->
              <template v-else>
                  <el-menu-item index="2-1" route="/login">登录</el-menu-item>
                  <el-menu-item index="2-2" route="/register">注册</el-menu-item>
              </template>
          </el-submenu>
      </el-menu>
  </div>
</template>

<script>
import SchoolLogo from '@/components/SchoolLogo.vue'
import { mapGetters } from 'vuex'
export default {
components: { SchoolLogo },
data() {
    return {
      activeIndex: '1',
    };
},
computed: {
  isLogin() {
    return !!this.$store.state.user.user.token
  },
  ...mapGetters('user', ['getUser'])
},
methods: {
  handleSelect(index, indexPath) {
    console.log(index, indexPath);
  },
  handleLogout() {
    this.$store.dispatch('user/logout')
    // 跳转到登录页
    this.$router.push('/login')
    location.reload() // 可选：确保状态更新
  },
  infoDetail(){
    const username = this.getUser.username;
    this.$router.push(`/alumniInfo/${username}`)
  }
}
}
</script>

<!-- 样式保持不变 -->

<style scoped>
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: transparent !important;
}

/* 校徽容器 */
.logo-container {
  flex-shrink: 0; /* 防止缩小 */
  margin-right: 30px;
}

/* 导航菜单样式 */
.nav-menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background-color: transparent !important;
  border-bottom: none !important;
}

/* 调整菜单项间距 */
.el-menu-item {
  padding: 0 20px !important;
}
</style>